<template>
  <div class="enter">
    <img class="e-pedant" src="@/assets/img/enter/pendant.png" />
    <img class="e-logo" src="@/assets/img/common/changan.png" />
    <img class="e-main" src="@/assets/img/enter/main.png" />
    <div class="e-button" :class="{ disable: props.loading }" @click="enter">
      <van-loading size="19px" v-if="props.loading"></van-loading>
      <span v-else>开启时光通道</span>
    </div>
    <div class="e-agreement">
      <Check @check="handleConfirmAuthority" />
      <span>点击开启，代表你同意运营团队获取你账号相关信息</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Toast } from "vant";

const props = withDefaults(
  defineProps<{
    loading: boolean;
  }>(),
  {
    loading: true,
  }
);

console.log("props", props.loading);

const emits = defineEmits(["enter"]);

const isCheck = ref(false);

const handleConfirmAuthority = (check: boolean) => {
  isCheck.value = check;
  console.log("isCheck.value", isCheck.value);
};

const enter = () => {
  if (props.loading) return;

  if (isCheck.value) {
    emits("enter");
  } else {
    Toast("请先勾选条款，再获取个人报告~");
  }
};
</script>

<script lang="ts">
import Check from "../../../../components/Check/index.vue";

export default {
  name: "EnterPage",
  components: {
    Check,
  },
};
</script>

<style lang="scss" scoped>
.enter {
  @include full-screen-relative;
}

.e-pedant {
  position: absolute;
  left: -30px;
  top: -5px;
  height: 348px;
  width: 307px;
}

.e-logo {
  position: absolute;
  top: 44px;
  right: 39px;
  height: 58px;
  width: 284px;
}

.e-main {
  position: fixed;
  bottom: -2px;
  height: 1101px;
  width: 750px;
}

.e-button {
  position: absolute;
  bottom: calc(94px + env(safe-area-inset-bottom));
  left: calc((100vw - 538px) / 2);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 538px;
  height: 148px;
  font-size: 30px;
  font-family: ChangAnunitype;
  font-weight: bold;
  color: #fef2f2;
  background-image: url("~@/assets/img/enter/bt.png");
  background-size: contain;
}

.disable {
  background-image: url("~@/assets/img/enter/bt-disable.png");
  background-size: contain;
}

.e-agreement {
  position: absolute;
  z-index: 99;
  left: 65px;
  bottom: calc(40px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;

  span {
    margin-left: 20px;
    font-size: 24px;
    font-family: ChangAnunitype;
    font-weight: 500;
    color: #edf8fd;
    text-shadow: 0px 0px 13px rgba(11, 101, 201, 0.48);
  }
}</style>
